<template>
  <div class="DBNail">
    <el-card>
      <div class="table-wrap">
        <h2>日指标</h2>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="PV">
          </el-table-column>
          <el-table-column
            prop="address"
            label="UV">
          </el-table-column>
          <el-table-column
            prop="date"
            label="跳出率">
          </el-table-column>
          <el-table-column
            prop="date"
            label="平均访问时长">
          </el-table-column>
        </el-table>
      </div>
      <div class="table-wrap">
        <h2>月指标</h2>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="address"
            label="UV">
          </el-table-column>
          <el-table-column
            prop="date"
            label="跳出率">
          </el-table-column>
          <el-table-column
            prop="date"
            label="平均访问时长">
          </el-table-column>
        </el-table>
      </div>
      <div class="btn-wrap">
        <el-button-group>
          <el-button :class="{'active-btn': currentIndex === 1}" @click="toggleIndex(1)">趋势分析</el-button>
          <el-button :class="{'active-btn': currentIndex === 2}" @click="toggleIndex(2)">页面上下游分析</el-button>
        </el-button-group>
      </div>
      <div class="select-wrap">
        <h3>趋势分析</h3>
        <div class="select-box box">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in buttonArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="time-box box">
          <el-date-picker
            v-model="timeValues"
            @change="changeTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('bidding.to')"
            :start-placeholder="$t('bidding.startTime')"
            :end-placeholder="$t('bidding.endTime')">
          </el-date-picker>
        </div>
      </div>
      <div class="eCharts-wrap">
        <div class="echarts-part">
          <div class="title">走势图</div>
          <div class="nodata" v-if="showNoData.lineECharts">No Data</div>
          <div class="chart lineECharts"  v-loading="loading.lineECharts"></div>
        </div>
        <div class="echarts-part">
          <div class="title">用户分布图</div>
          <div class="nodata" v-if="showNoData.barECharts">No Data</div>
          <div class="chart barECharts"  v-loading="loading.barECharts"></div>
        </div>
      </div>
      <div class="table-wrap-two">
        <el-table
          :data="tableData2"
          border
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <el-table-column
            prop="name"
            label="时间段">
          </el-table-column>
          <el-table-column
            prop="name"
            label="工程师在线模块">
          </el-table-column>
          <el-table-column
            prop="address"
            label="一键报修模块">
          </el-table-column>
          <el-table-column
            prop="name"
            label="保修/配置/驱动模块">
          </el-table-column>
          <el-table-column
            prop="name"
            label="数据恢复模块">
          </el-table-column>
          <el-table-column
            prop="name"
            label="多品牌维保模块">
          </el-table-column>
          <el-table-column
            prop="name"
            label="工单模块">
          </el-table-column>
          <el-table-column
            prop="date"
            label="我的模块">
          </el-table-column>
          <el-table-column
            prop="date"
            label="联系我们模块">
          </el-table-column>
          <el-table-column
            prop="date"
            label="软件服务支持范围模块">
          </el-table-column>
        </el-table>
      </div>
      <div class="eCharts-bottom">
        <div class="echarts-part">
          <div class="title">页面上下游分析</div>
          <div class="nodata" v-if="showNoData.sankeyECharts">No Data</div>
          <div class="chart sankeyECharts"  v-loading="loading.sankeyECharts"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../../../../utils/auth'
  export default {
    name: "DBWeChat",
    data() {
      return {
        testPort: '',
        getUrl: '../../../../../../static/json',
        buttonArr:[
          {label:'PV',value:'PV'},
          {label:'UV',value:'UV'},
          {label:'DAU',value:'DAU'},
          {label:'MAU',value:'MAU'},
          {label:'日活跃率',value:'日活跃率'},
          {label:'月活跃率',value:'月活跃率'},
          {label:'跳出率',value:'跳出率'},
          {label:'平均访问时长',value:'平均访问时长'},
          {label:'日留存',value:'日留存'},
          {label:'月留存',value:'月留存'}
        ],
        timeValues:[],
        echartsObj: {
          lineECharts:'',
          barECharts:'',
          sankeyECharts:'',
        },
        loading:{
          lineECharts:false,
          barECharts:false,
          sankeyECharts:false,
        },
        showNoData:{
          lineECharts:false,
          barECharts:false,
          sankeyECharts:false,
        },
        tableDatas: [
          {
            flag: '昨日',
            data: {
              pv1: '123',
              pv2: '345',
              pv3: '456',
              uv1: '空对空',
              uv2: '的咖啡机',
              uv3: '快递费'
            }
          },
          {
            flag: '今日',
            data: {
              pv1: '123',
              pv2: '345',
              pv3: '456',
              uv1: '空对空',
              uv2: '的咖啡机',
              uv3: '快递费'
            }
          }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentIndex: 1,
        value: '',
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        optionColors: ['#0090e9', '#6be6c1', '#59c4e6', '#ffb980', '#b692df']
      }
    },
    methods:{
      initEchartsDom() {
        this.echartsObj.lineECharts = this.echarts.init(document.getElementsByClassName('lineECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.barECharts = this.echarts.init(document.getElementsByClassName('barECharts')[0], null, {renderer: 'canvas'})
        this.echartsObj.sankeyECharts = this.echarts.init(document.getElementsByClassName('sankeyECharts')[0], null, {renderer: 'canvas'})
      },
      changeTime(){

      },
      toggleIndex(index) {
        if (index === this.currentIndex) {
          return
        }
        this.currentIndex = index
      },
      //  echarts-module
      drawEcharts(paramsData, noData, echartsObj,echartsType,isSmooth,yAxisName) {
        if (JSON.stringify(paramsData) !== "{}") {
          let xAxisData = paramsData.name
          let data = paramsData.bar.value.map(item => item.name)
          let series = paramsData.bar.value.map(item => {
            return {
              barGap: 0,
              type: echartsType,
              smooth: isSmooth,
              data: item.value
            }
          })
          let option = {
            name: this.optionColors,
            color: this.optionColors,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                align: 'left',
                color: '#7588E4'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              data: data,
              itemWidth: 15,
              itemHeight: 15
            },
            grid: {
              left: 20,
              right: 20,
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              name: yAxisName,
              splitLine: {
                show: false
              },
              axisLabel: {
                color: '#959eaf',
                fontFamily: 'Helvetica'
              },
              axisLine: {
                lineStyle: {
                  color: '#959eaf'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: xAxisData,
              splitLine: {
                show: false
              },
              axisLabel: {
                color: '#959eaf',
                fontFamily: 'Helvetica'
              },
              axisLine: {
                lineStyle: {
                  color: '#959eaf'
                }
              }
            },
            series: series
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      drawEchartsSankey(paramsData){
        let data = paramsData.nodes, links = paramsData.links
        let option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'

          },
          series: [
            {
              type: 'sankey',
              layout:'none',
              data: data,
              links: links,
              focusNodeAdjacency: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#aaa'
                }
              },
              lineStyle: {
                normal: {
                  curveness: 0.5
                }
              }
            }
          ]
        }
        this.echartsObj.sankeyECharts.clear()
        this.echartsObj.sankeyECharts.setOption(option)
      },
      async getDataEchartsLine(params) {
        this.loading.lineECharts = true
        let res = await this.axios.post(`${this.testPort}/surveyFroms/fisQuarterByCustomerTypeSurvey.do`, params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.lineECharts = false
          this.drawEcharts(resData, 'lineECharts', this.echartsObj.lineECharts, 'line', true, '次数')
        },0)
      },
      async getDataEchartsBar(params) {
        this.loading.barECharts = true
        let res = await this.axios.post(`${this.testPort}/surveyFroms/fisQuarterByCustomerTypeSurvey.do`, params)
        let resData = res.data.data
        setTimeout(()=>{
          this.loading.barECharts = false
          this.drawEcharts(resData,'barECharts', this.echartsObj.barECharts, 'bar', false, '%')
        },0)
      },
      getDataEchartsSankey(){
        const _this = this
        this.loading.sankeyECharts = true
        this.http.get(`${this.getUrl}/Sankey.json`).then(res => {
          let resData = res.data
          _this.loading.sankeyECharts = false
          _this.drawEchartsSankey(resData)
        })
      },
      loadAllCharts(){
        let params = {
          BG: [],
          serviceType: "",
          username: getUsername()
        }
        this.getDataEchartsLine(params);
        this.getDataEchartsBar(params);
        this.getDataEchartsSankey();
      },
      echartsResize(){
        setTimeout(() => {
          this.echartsObj.lineECharts.resize()
          this.echartsObj.barECharts.resize()
          this.echartsObj.sankeyECharts.resize()
        },200)
      },
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted(){
      this.initEchartsDom();
      this.loadAllCharts();
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .DBNail{
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .table-wrap{}
    .btn-wrap{
      margin:15px 0;
      text-align: center;
      .el-button {
        color: #333;
        background-color: #fff;
        width: 144px;
      }
      .active-btn {
        background-color: #0090e9;
        color: #fff;
      }
    }
    .button-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .button-box{
        margin-right: 15px;
      }
    }
    .eCharts-wrap{
      display: flex;
      margin-top:20px;
      .echarts-part{
        flex: 1;
        .title{
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #333333;
          font-weight:bold;
        }
        .chart{
          width:100%;
          height:35vh;
        }
      }
    }
    .select-wrap {
      margin-top: 20px;
      .box{
        display: inline-block;
      }
      .select-box{
        margin-right: 15px;
      }
    }
    .table-wrap-two{
      margin-top: 15px;
    }
    .eCharts-bottom{
      margin-top:20px;
      .title{
        font-family: PingFang-SC-Bold;
        font-size: 20px;
        color: #333333;
        font-weight:bold;
      }
      .chart{
        width:100%;
        height:40vh;
      }
    }
  }
</style>
